<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding:30px">
    <table class="table table-responsive">
        <caption><h3>习题</h3>
            <hr>
            <button class="btn btn-primary" id="user_add" data-toggle="modal" data-target="#myModal">新增</button>
            <button class="btn btn-primary" id="user_delete">删除</button>
            <button class="btn btn-primary" id="user_edit" data-target="#myModal">编辑</button>
            <button class="btn btn-primary" id="user_find">查询</button>
            <input type="text" placeholder="按工号查询" id="s1_code" style="width:100px;">
            <input type="text" placeholder="按姓名查询" id="s2_code" style="width:100px;">
        </caption>
        <hr>
        
        <thead>
            <tr>
                <th>序号</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>密码</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <tbody>
            <tr class="info">
                <th>
                    <div class="checkbox-inline,navbar-brand">
                        <label for="">
                            <input type="checkbox">
                        </label>
                    </div>
                </th>
                <th>1001</th>
                <th>张三</th>
                <th>女</th>
                <th>1234</th>
                <th>28</th>
                <th>1991-1-1</th>
            </tr>
            <tr class="danger">
                <th>
                    <div class="checkbox-inline,navbar-brand">
                        <label for="">
                            <input type="checkbox">
                        </label>
                    </div>
                </th>
                <th>1002</th>
                <th>李四</th>
                <th>男</th>
                <th>1234</th>
                <th>28</th>
                <th>1992-2-2</th>
            </tr>
            <tr class="info">
                <th>
                    <div class="checkbox-inline,navbar-brand">
                        <label for="">
                            <input type="checkbox">
                        </label>
                    </div>
                </th>
                <th>1003</th>
                <th>王五</th>
                <th>女</th>
                <th>1234</th>
                <th>27</th>
                <th>1993-3-3</th>
            </tr>
            <tr class="danger">
                <th>
                    <div class="checkbox-inline,navbar-brand">
                    <label for="">
                        <input type="checkbox">
                    </label>
                    </div>
                </th>
                <th>1004</th>
                <th>赵六</th>
                <th>女</th>
                <th>1234</th>
                <th>26</th>
                <th>1994-4-4</th>
            </tr>
        </tbody>
    </table>

    <!-- 模态框 -->
    <div class="modal" id="myModal" rule="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" aria-hidden="true">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">新增用户</h4>
                </div>
                <div class="modal-body" id="modal-body">
                    <label for="name">工号：</label>
                    <input type="text" class="form-control" id="m_code" placeholder="请输入工号">
                    <label for="name">姓名：</label>
                    <input type="text" class="form-control" id="m_userName" placeholder="请输入姓名">
                    <label for="name">性别：</label>
                    <input type="text" class="form-control" id="m_sex" placeholder="请输入性别">
                    <label for="name">密码：</label>
                    <input type="text" class="form-control" id="m_passWord" placeholder="请输入密码">
                    <label for="name">年龄：</label>
                    <input type="text" class="form-control" id="m_age" placeholder="请输入年龄">
                    <label for="name">出生日期：</label>
                    <input type="text" class="form-control" id="m_birthday" placeholder="请输入出生日期">
                </div>
                <div class="modal-footer">
                    <button id="save" class="btn btn-default" data-dismiss="modal">保存</button>
                    <button type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        function add(){
            var ad = document.createElement()
        }
    </script>
</body>
</html>